<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" value="" placeholder="请输入城市名字">
    <button id="btn1">第一题</button>
    <button id="btn2">第二题</button>
    <button id="btn3">第三题</button>
    <button id="btn4">第四题</button>
    <button id="btn5">第五题</button>
    <ul>
        <li>北京</li>
        <li id="sh">上海</li>
        <li>深圳</li>
        <li>长沙</li>
        <li>武汉</li>
        <li>成都</li>
    </ul>
    <script>
        /* 
            1. 在上海的后面一个前面元素    四川
            2. 获取上海的弟弟
            3. 删除上海的弟弟
            4. 删除最后一个元素
            5. 删除武汉
        */
        var btn = document.querySelector("button")
        var ul = document.querySelector("ul")
        var sh = document.querySelector("#sh")
        var inp = document.querySelector("input")

        /* 第五题 */
        var flag = true;
        btn5.onclick = function(){
            if(!flag){
                window.alert("武汉已经被删除了");
                return;
            }
            //获取武汉
            var li5 = document.querySelector("li:nth-child(5)")
            ul.removeChild(li5)
            flag = false;//删除一次之后,将开关给关上
        }


        /* 第四题 */
        btn4.onclick = function(){
            if(!ul.children.length){
                window.alert("儿子都删完了")
                return;
            }
            ul.removeChild(ul.lastElementChild)
        }

        /* 第三题 */
        btn3.onclick = function(){
            //获取上海弟弟
            var sz = sh.nextElementSibling
            if(!sz){
                window.alert("弟弟被删完了")
                return;
            }
            //删除上海的弟弟
            ul.removeChild(sz)
        }


        /* 第二题 */
        btn2.onclick = function(){
            //获取上海的弟弟
            // window.alert(sh.nextElementSibling)
            window.alert(sh.nextElementSibling.innerHTML);
        }


        /* 第一题 */
        btn1.onclick = function () {
            if (!inp.value.trim()) {
                window.alert("请输入城市")
                return;
            }
            // 在上海的后面一个前面元素    四川
            var li = document.createElement("li")
            // 创建一个四川
            li.innerHTML = inp.value;
            //将四川扔到上海的前面
            ul.insertBefore(li, sh);
            //清空文本值
            inp.value = "";
        }

    </script>
</body>

</html>